<template>
	<view class="mykehu p20">
		<myNav>
			<view slot="left" @click="back"><uni-icons type="closeempty" color="#fff"></uni-icons></view>
			<view class="center">房源明细</view>
		</myNav>
		<view class="Myxtitle p10">基本信息</view>
		<scroll-view class="myTable" scroll-y="true" style="height: 168px;">
			<view class="">
				<view class="list">房间名称: 测试一号楼盘-测试一期-A区-七单元-11栋-2-3202</view>
				<view class="list">
					<view class="left">户型</view>
					<view class="right">A ---查看户型</view>
				</view>
				<view class="list">
					<view class="left">房间结构</view>
					<view class="right">3室2厅2卫</view>
				</view>
				<view class="list">
					<view class="left">建筑面积</view>
					<view class="right">110.00 m2</view>
				</view>
				<view class="list">
					<view class="left">套内面积</view>
					<view class="right">100.00 m2</view>
				</view>
				<view class="list">
					<view class="left">建筑单价</view>
					<view class="right">13,000.00 元/m2</view>
				</view>
				<view class="list">
					<view class="left">标准总价</view>
					<view class="right">13,000.00 元/m2</view>
				</view>
			</view>
		</scroll-view>
		<view class="Myxtitle p10">付款方式</view>
		<scroll-view class="myTable" scroll-y="true" style="height: 288px;">
			<view class=" p10">
			<view class="list">
				<view class="left">付款方式</view>
				<view class="right">商业贷款</view>
			</view>
			<view class="list">
				<view class="left">优惠方案</view>
				<view class="right">无折扣</view>
			</view>
			<view class="list">
				<view class="left">优惠金额</view>
				<view class="right">10元</view>
			</view>
			<view class="list">
				<view class="left">折后单价</view>
				<view class="right">13,000.00 元/m2</view>
			</view>
			<view class="list">
				<view class="left">折后总价</view>
				<view class="right">1,400,000.00 元/m2</view>
			</view>
			<view class="list">
				<view class="left">首付(30%)</view>
				<view class="right">341,000 元</view>
			</view>
			<view class="list">
				<view class="left">商业贷款</view>
				<view class="right">790,000元</view>
			</view>
			<view class="list">
				<view class="left">商业利率</view>
				<view class="right">4.9%</view>
			</view>
			<view class="list">
				<view class="left">贷款总额</view>
				<view class="right">790,000元</view>
			</view>
			<view class="list">
				<view class="left">贷款年限</view>
				<view class="right">30年</view>
			</view>
			<view class="list">
				<view class="left">参考月供</view>
				<view class="right">4,192.74 元/月</view>
			</view>
			</view>
		</scroll-view>
		<view class="guwen">
			<p class="tel">置业顾问：测试人一  电话：130123456789</p>
			<p class='time'>日期：2020-03-13</p>
			<p class='jituan'>山湖海集团All rights reserved</p>
		</view>
		<view class="btn" style="margin-top: 20px;">确认完毕并发送</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import darkCalendar from '@/components/dark-calendar/dark-calendar';
import myNav from '../../components/mynav/mynav.vue';
import { searchedVistor } from '@/api/index.js';
import { MyShow } from '@/util/my.js';
export default {
	components: { myNav, darkCalendar },
	data() {
		return {
			para: ''
		};
	},
	methods: {
		back() {
			uni.switchTab({
				url: '../my/my'
			});
		},
		async searchedVistor() {
			//去请求接口
			//  todo 字段自己填充吧
			// console.log('去请求接口');
			try {
				let reslut = await searchedVistor({
					para: this.para
				});
				//成功
				new MyShow('需要渲染的字段').tixing();
			} catch (e) {
				//TODO handle the exception
				new MyShow('需要渲染的字段').tixing();
			}
		},
		gotoinfo(val) {
			uni.navigateTo({
				url: './p11'
			});
		},
		goto(val) {
			uni.navigateTo({
				// url: './p21?id=' + val.id
			});
		}
	}
};
</script>

<style lang="scss">
@import './main.scss';
.myright {
	display: flex;
	flex-direction: column;
	image {
		width: 20px;
		height: 20px;
	}
	margin-top: 40px;
	align-items: center;
	color: #ffffff;
	text {
		margin-top: 5px;
	}
}
.p10 {
	padding: 0 10px;
}
.Myxtitle {
	font-size: 14px;
	font-weight: 700;
}
.myTable {
	width: 335px;
	margin: 0 auto;
	border: 1px solid #82cee4;
	.list {
		font-size: 12px;
		height: 26px;
		display: flex;
		// justify-content: ;
		text-align: center;
		.left {
			flex: 1;
		}
		.right {
			flex: 1;
		}
	}
}
.guwen{
	text-align: center;
	    font-size: 12px;
	    font-weight: 400;
	    font-style: italic;
	    text-decoration: none;
	    font-family: "Segoe UI";
	    color: rgb(0, 0, 0);
		.jituan{
			font-size: 14px;
			    font-weight: 400;
			    font-style: italic;
			    text-decoration: none;
			    font-family: "Segoe UI";
			    color: rgb(204, 204, 204);
			   
			    // width: 186px;
				text-align: center;
			    position: relative;
			    overflow-wrap: break-word;
			    word-break: break-word;
			    box-sizing: border-box;
			    z-index: 10;
			    line-height: 20px;
		}
}
</style>
